import Vue from 'vue'
import App from './App.vue'
import store from './store'
import music from './utils/music'
import './styles/base.css'
import './styles/app.css'
import './styles/animation.css'
import { animation } from './utils/animate'

// import backgroundMusic from './assets/bg.mp3'

music.setMusic('https://rs.creditcard.cmbc.com.cn/menhu/xrcz/bg.fb988052.mp3')
music.init()

Vue.config.productionTip = false

Vue.mixin({
  methods: {
    animation
  }
})

function landscape(config){
  var color = config && config.color ? config.color : "#000",
      txt = config && config.txt ? config.txt : "为了更好的体验，请使用竖屏并锁定竖排设置浏览",
      images = config && config.images ? config.images : "";
  document.body.innerHTML += '<style type="text/css">@-webkit-keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } @keyframes rotation{10%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 50%, 60%{transform: rotate(0deg); -webkit-transform: rotate(0deg)} 90%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} 100%{transform: rotate(90deg); -webkit-transform: rotate(90deg)} } #orientLayer{display: none; z-index: 999999; pointer-events: none;} @media screen and (min-aspect-ratio: 12/7){#orientLayer{display: block;} } .mod-orient-layer{display: none; pointer-events: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: '+color+'; z-index: 9997} .mod-orient-layer__content{position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center} .mod-orient-layer__icon-orient{background-image: url('+images+'); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px} .mod-orient-layer__desc{margin-top: 20px; font-size: 15px; color: #fff}</style><div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer__content"> <i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">'+txt+'</div> </div></div>'
}
landscape()

!function(n){
  var  e=n.document,
       t=e.documentElement,
       i=750,
       d=i/100,
       a=function(){
           var n=t.clientWidth||375;n>750&&(n=750);
           t.style.fontSize=n/d+"px"
       };
       e.addEventListener("DOMContentLoaded",a,!1)
      //  setInterval(a, 5000)
}(window);

setTimeout(function() {
  new Vue({
    store,
    render: h => h(App)
  }).$mount('#app')
}, 10)


